<template>
  <div>
    <van-search
      v-model="item"
      show-action
      placeholder="请输入商品名称"
      @cancel="$router.go(-1)"
    />

    <van-row class="vanrow" justify="space-around" gutter="20">
            <van-col
              style="margin-bottom: 10px"
              span="12"
              class="vancol"
              v-for="(item,index) in directlyList"
              :key="index"
              @click="todetail(index)"
            >
              <div class="listContainer" style="margin-bottom: 10px">
                <div class="listItem">
                  <img :src="item.listPicUrl" alt="" />
                  <p>{{ item.name }}</p>
                  <span>{{
                    item.finalPriceInfoVO.priceInfo.finalPrice
                      ? item.finalPriceInfoVO.priceInfo.finalPrice.prefix
                      : ""
                  }}</span>
                  <span style="color: red; font-weight: bold"
                    >
                    <span >
                    {{
                      item.retailPrice ? "￥" : ""
                    }}</span>
                    <span class="da">{{
                      item
                        ? item.retailPrice
                        : ""
                    }}
                    </span>
                    <del
                      style="color: #999999"
                      v-if="item.finalPriceInfoVO.priceInfo.finalPrice"
                      >{{
                        item.finalPriceInfoVO.priceInfo
                          ? '￥'+item.finalPriceInfoVO.priceInfo.counterPrice
                          : ""
                      }}</del
                    >
                    <!-- <span v-else style="color: red; font-weight: bold"
                      >￥{{
                        item.finalPriceInfoVO.priceInfo
                          ? item.finalPriceInfoVO.priceInfo.counterPrice
                          : ""
                      }}</span
                    > -->
                  </span>
                </div>
                <span
                  style="font-size: 25px; margin-right: 10px; color: #fa1e32"
                  >{{
                    item.finalPriceInfoVO.banner
                      ? item.finalPriceInfoVO.banner.title
                      : ""
                  }}</span
                >
                <span style="font-size: 25px; color: red">{{
                  item.finalPriceInfoVO.banner
                    ? item.finalPriceInfoVO.banner.content
                    : ""
                }}</span>
              </div>
            </van-col>
    </van-row>
  </div>
</template>

<script>
import { reqsearchInfo,reqGoodDetailInfo } from "@/api/index.js";
export default {
  name: "",
  data() {
    return {
      item: "",
      directlyList:[],
      searchInfo:{
        img:'',
        title:'',
        price:''
      }
    };
  },
  mounted() {
    this.getsearchList();
  },
  methods: {
    async getsearchList() {
      let keyword = this.$route.query.keyword;
      this.item = keyword;
      // console.log(keyword);
      let result = await reqsearchInfo(keyword);
      if (result.code == 200) {
        this.directlyList = result.data.directlyList;
      } else {
        alert(result.message);
      }
    },
    async todetail(index){
      let result = this.directlyList[index]
      // console.log(result)
      let info={
        img:result.listPicUrl,
        title:result.name,
        price:result.retailPrice
      }
      this.searchInfo = info
      this.$router.push({
        path:'/detail',
        query:{info}
      })
    }
  },
};
</script>

<style lang="less" scoped>
.vanrow {
        width: 100%;
        height: 100%;
        padding-left: 10px;
        margin-bottom: 5px;
        box-sizing: border-box;
        .listContainer {
          box-sizing: border-box;
          .listItem {
            img {
              width: 170px;
              height: 170px;
            }
            p {
              display: block;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
      }
</style>